<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="cjw">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>商城首页- 模块- 整体框架</title>
  <link type="text/css" rel="stylesheet" href="css/MyCss.css" />
  <link rel="stylesheet" type="text/css" href="css/ShopCartStyle.css" />
  <link type="text/css" rel="stylesheet" href="css/right-bar.css" />
  <link type="text/css" rel="stylesheet" href="css/base.css" />
  <style contenteditable="" draggable="true">
	/* S - flip-advert */
	.flip-advert {}
	.flip-advert  .flip-advert-con {background:rgba(51, 57, 255, 0.08); height:500px;}
	/* E - flip-advert */ 

	/* S - goods-area */
	.goods-area-part1  ul li:hover, .goods-area-part2  ul li:hover {box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
	.goods-area-part1 {margin:10px 0px;}
	.goods-area-part1  ul li {width:267px; height:150px; background:rgba(51, 57, 255, 0.08); float:left; margin-left:10px; cursor:pointer;}
	.part1-con ul li:first-child {margin-left:0px;}

	.goods-area-part2 {margin:-10px 0px;}
	.goods-area-part2 .part2-con {width:1120px;} 
	.goods-area-part2  ul li {width:360px; height:228px; background:rgba(51, 57, 255, 0.08); float:left; margin-top:10px; margin-left:10px; cursor:pointer;}
	/* E - goods-area */
  </style>
 </head>
 <body>
	<!--S - infor-nav-->
	<div class="infor-nav">
		<div class="infor-nav-con">
			<!--登录 注册 我的订单 我的个人信息 购物车 -->
			<ul class="nolist">
				<li>
					<label class="loginText" onclick="clickToOfLocal('fonts/memberLogin.html')" title="点击进行登录">您当前还未登录</label>&nbsp;&nbsp;&nbsp;&nbsp;
					<label class="register-bt" onclick="clickToOfLocal('fonts/memberRegister.html')" title="点击进行注册">注册</label>
				</li>
				<li></li>
				<li></li>
				<li>
					<label class="my-infor" onclick="clickToOfOpen('fonts/用户个人页.html', 5)" title="点击跳转我的个人信息">我的个人信息</label>&nbsp;&nbsp;
					<label class="my-order" onclick="clickToOfOpen('fonts/用户个人页.html', 1)" title="点击跳转我的工单">我的订单</label>&nbsp;&nbsp;
					<label class="my-cart" onclick="clickToOfOpen('fonts/用户个人页.html', 2)" title="点击跳转我的购物车">购物车</label>
				</li>
			</ul>
		</div>
	</div>
	<!--E - infor-nav-->

	<!--S - follow-box-->
	<div class="follow-box">
		<div class="follow-box-con">
			<div class="shop-icon">
				<a></a>
			</div>
			<!--查找-->
			<div class="search" id="search">
				<input type="text" placeholder="请输入要商品关键字" id="search_text">
				<input type="button" value="搜索本站" id="search_button">
				<!--搜索结果显示区-->
				<div class="search_show" id="search_show"></div>
			</div>
		</div>
	</div>
	<!--E - follow-box-->

	<!--S - goods-nav-->
	<div class="goods-nav">
		<div class="goods-nav-con">
			<div class="shop-icon">
				<a></a>
			</div>
			<div class="shop-nav">
				<ul class="nolist">
					<li>服装</li>
					<li>日用品</li>
					<li>食品</li>
					<li>电子产品</li>
					<li>高科技</li>
				</ul>
			</div>
			<!--查找-->
			<div class="search" id="search">
				<input type="text" placeholder="请输入要商品关键字" id="search_text">
				<input type="button" value="搜索本站" id="search_button">
				<!--搜索结果显示区-->
				<div class="search_show" id="search_show"></div>
			</div>
		</div>
	</div>
	<!--E - goods-nav-->
	
	<!--S - flip-advert-->
	<div class="flip-advert">
		<div class="flip-advert-con">
		</div>
	</div>
	<!--E - flip-advert-->

	<!--S - goods-area-->
	<div class="goods-area">
		<div class="goods-area-part1">
			<div class="part1-con">
				<ul class="nolist">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
		<div class="goods-area-part2">
			<div class="part2-con">
				<ul class="nolist">
					<li style="background:url(image/goods/goods9.jpg);" title="点击前往店铺"></li>
					<li style="background:url(image/goods/goods1.jpg);" title="点击前往店铺"></li>
					<li style="background:url(image/goods/goods2.jpg);" title="点击前往店铺"></li>
					<li style="background:url(image/goods/goods3.jpg);" title="点击前往店铺"></li>
					<li style="background:url(image/goods/goods4.jpg);" title="点击前往店铺"></li>
					<li style="background:url(image/goods/goods5.jpg);" title="点击前往店铺"></li>
					<li style="background:url(image/goods/goods6.jpg);" title="点击前往店铺"></li>
					<li style="background:url(image/goods/goods7.jpg);" title="点击前往店铺"></li>
					<li style="background:url(image/goods/goods8.jpg);" title="点击前往店铺"></li>
				</ul>
			</div>
		</div>
	</div>
	<!--E - goods-area-->

	<!-- start shop car -->
	<!-- 这里用到的模态框的技术 -->
	<div class="shopcar">
		<div class="shopcarcnt">
			<!-- shopcarclick 收进、出按钮 -->
			<div class="shopcarclick" id="shopcarclick">
				<ul class="nolist click-cnt">
					<!--<i class="shopclick_ico"></i><i class="p-infor"></i><i class="goods-colle"></i><i class="my-food"></i>-->
					<li class="clicknav my-infor-li" title="会员">
						<img src="image/p_infor.png" width="25px" height="25px" alt=""/>
						<div class="bar-nologin">
							<div class="bar-in-com-nologin">
								<label>您未登录</label>
							</div>
						</div>
						<!--
						未登录
						
						<div class="bar-login">
							<div class="bar-in-com">
								<label>
									<div class="head-pi">
										<img src="image/test/tako.jpg" width="50px" height="50px" />
									</div>
									<div class="menber-name">
										<label>大购物狂</label>
										<label>
											<img title="蓝砖会员" src="image/person/Member3.png" width="20px" height="20px" />
										</label>
									</div>
									<div class="menber-integral">
										积分:25
									</div>
								</label>
							</div>
						</div>
						-->
						
					</li>
					<li class="clicknav car-bt-li" title="购物车">
						<img src="image/car2.png" width="24px" height="24px" alt=""/>
						<!--未登录-->
						<div class="bar-nologin">
							<div class="bar-in-com-nologin">
								<label>您未登录</label>
							</div>
						</div>
					</li>
					<li class="clicknav colle-bt-li" title="商品收藏">
						<img src="image/colle1.png" width="25px" height="25px" alt=""/>
						
						<!--未登录-->
						<div class="bar-nologin">
							<div class="bar-in-com-nologin">
								<label>未登录哦</label>
							</div>
						</div>
						<!--
						收藏为空
						<div class="bar-login bar-login-null">
							<div class="bar-in-com-nologin">
								<label>空的哦</label>
							</div>
						</div>
						<div class="bar-login">
							<div class="bar-in-com">
							</div>
							<div class="bar-in-bom">
								<label>查看更多收藏</label>
							</div>
						</div>
						<div class="bar-login bar-login-null">
							<div class="bar-in-com-nologin">
								<label>空的哦</label>
							</div>
						</div>
						-->
						
					</li>
					<li class="clicknav foot-bt-li" title="个人足迹">
						<img src="image/food.png" width="25px" height="25px" alt=""/>
						<div class="bar-nologin">
							<div class="bar-in-com-nologin">
								<label>未登录哦</label>
							</div>
						</div>
						<!--
						未登录
						
						<div class="bar-login">
							<div class="bar-in-com">
								<ul class="nolist">
									<li>
										<div class="lictn" data-id="">
											<label class="goodspho">
												<img src='image/test/tako.jpg' width="55" height="60" />
											</label>
											<label class="colledes">
												<label class="colle-infor">
													<label class="colle-name">黑白条纹打底衫</label>
													<label class="colle-price"><del>110</del>120</label>
												</label>
											</label>
										</div>
									</li>
								</ul>
							</div>
							<div class="bar-in-bom">
								<label>查看更多</label>
							</div>
						</div>
						-->
						
					</li>
				</ul>
			</div>
			

			<!-- list_cont -->
			<div class="list_cont">
				<!-- shopping_head 标题 -->
				<div class="shopping_head">购物车</div>

				<!-- shopping_list 购物清单 -->
				<div class="shopping_list">
					<div class="shop_list_cnt">
						<!-- 单个物品 -->	
						<ul class="nolist">
						</ul>
					</div>
				</div>
				<!-- shopping_result 结算结果 -->
				<div class="shopping_result">
					<div class="RMB_result">
						<span>合计</span>
						<span class="RMB_NUM">0</span>
						<span>元</span>
					</div>
					<div class="result_button">
						<input type="button" value="结算" />
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- shop car end -->

	<!-- start bom -->
	<div class="bom">
		<div class="bom_container">
			<li style="color:#586069;list-style:none;padding:10px 245px;">Copyright ©2017 <span  style="color:#a71d5d;cursor:pointer;" title="作者介绍">chen</span> Powered By <span  style="color:#a71d5d;cursor:pointer;" title="程序目录">Login</span> Version 1.0.0</li>
		</div>
	</div>
	<!-- bom end -->
	<script src="js/MyjsV0-8.2.js"></script>
	<script src="js/shop_cart.js"></script>
	<script src="js/util-2.js"></script>
	<script src="js/data.js"></script>
	<script>
	var ani = new AnimateRoutine({
		aniEle:$(".follow-box")[0],
		aniMax:50,
		type:"bottom",
	});
	var limet = true;
	window.onscroll = function(){
		var sTop = document.documentElement.scrollTop || document.body.scrollTop;
		if(sTop >= 40){
			if(limet){
				limet = false;
				ani.run();
			}
		}
		else{
			if(!limet){
				limet = true;
				ani.next();
			}
		}	
	}
	/**
	提示条
	*/
	function CueBar (){
		
	}
	var addImage2={
		//可变参数
        p_url:"",             
		desc:"",
		alt:"图片描述",
		id:document.body,  //容器id
		add_Image:function(){
		  var flag=true;   //flag防止mousemove反复执行 
		  var flag1=true;   //flag1在鼠标移出时停止start的执行
		  var x_;  
		  var y_;
		  var id_id1=Num_ran5();  //img id
		  var id_id2=Num_ran5();  //span id
		  var img_w=(addImage2.id).offsetWidth;   
		  var img_h=(addImage2.id).offsetHeight;
		  var span_h=img_h-28;    //span特效位置
		  var start=img_h;
		  var end=span_h;
		  
		  addImage2.id.style.position="relative";
		  addImage2.id.style.float="left";
		  addImage2.id.style.cursor="pointer";
		  addImage2.id.style.overflow="hidden";
		  append_front(addImage2.id,"<img src="+addImage2.p_url+" id="+id_id1+" width="+img_w+" height="+img_h+" style='position:absolute;'>");
		  if(addImage2.desc!=undefined){_(id_id2).innerHTML=addImage2.desc;}
		  else{_(id_id2).innerHTML=addImage2.p_url;}
		  //_(id_id1).width=img_w;
		  //_(id_id1).height=img_h;
          addImage2.id.onmousemove=function(e){
			  x_=e.pageX-addImage2.id.getBoundingClientRect().left;
			  y_=e.pageY-addImage2.id.getBoundingClientRect().top;
			  if(flag){   //flag防止mousemove反复执行
				  flag1=true;
			      var timer=setInterval(function(){
				  if(flag1){start--;}  //flag1在鼠标移出时停止start的执行
				  _(id_id2).style.marginTop=start+"px";
				  if(start<end){
					  end=span_h;
					  _(id_id2).style.marginTop=end+"px";
					  clearInterval(timer);
				  }
			   },1);
			   flag=false;
			  }
			  
		  }
		  addImage2.id.onmouseout=function(){
			  flag1=false;
			 if(!flag){
			 var timer1=setInterval(function(){
                 start++;
                 _(id_id2).style.marginTop=start+"px";
				 if(start>img_h){
					  start=img_h;
					  _(id_id2).style.marginTop=start+"px";
				      clearInterval(timer1);
				 }
			  },1)
			  flag=true;
			 }
		  }
		},
	}
	/*
	检查后台是否登录成功
		成功	success
		不成功  error
	*/
	var privili = false; //初始化权限字段
	/* ajax({
		type:"post",
		url:"index_initPage",
		success:function(msg){
			console.log("数据-"+msg);
			if($$.util.isJSON(msg)){
				console.log("登录成功！");
				privili = true;
				var object = $$.json.toObject(msg);
				removeInitContainer();	
				initCarList(	object.get("car"));
				initCollList(	object.get("colle"));
				initFootList(	object.get("foot"));
				initInfor(		object.get("infor"));
				initWellcome(	object.get("infor"));
			}else if(msg == "false"){
				//无权限
				console.log("未登录，无权限");
			}else {
				//以游客的方式浏览
				console.log("数据异常"+msg);
			}
		},error:function(){
			alert("初始化异常");
		}
	}); */
	//欢迎语
	function initWellcome(person){
		$(".loginText")[0].text(person.get("Name")+"，欢迎您。");
	}
	//删除右栏初始元素 删掉不成功的提示容器
	function removeInitContainer(){
		var es = $(".bar-nologin");
		for(var i = 0, len = es.length; i < len; i++) 
			es[0].remove();
	}
	//初始化右栏购物车列表
	function initCarList(cars){
		if(cars.length > 0){
			var carit = cars.itarator();
			var money = 0;
			while(carit.hasNext()){
				var car = carit.next();
				$(".shop_list_cnt")[0].$("ul")[0].insert(createCar(car.get("id"), car.get("img"), car.get("name"), car.get("size"), car.get("quantity"), car.get("price")));
				money += car.get("quantity");
			}
			$(".RMB_NUM")[0].text(money);
		}else{
			//空容器
		}
	}
	//初始化右栏收藏列表
	function initCollList(colles){
		if(colles.length > 0){
			//登录成功 添加容器  收藏
			$(".colle-bt-li")[0].insert(cntMudle("colle-cnt"));
			var collit = colles.itarator();
			while(collit.hasNext()){
				var coll = collit.next();
				$(".colle-cnt")[0].insert(colleMudle(coll.get("id"), coll.get("img"), coll.get("name"), coll.get("price"), coll.get("time")));
			}
		}else{
			//空容器
			$(".colle-bt-li")[0].insert(createFoot_null());
		}
	}
	//初始化右栏足迹列表
	function initFootList(foots){
		if(foots.length > 0){
			//登录成功 添加容器 足迹
			$(".foot-bt-li")[0].insert(cntMudle("foot-cnt"));
			var footit = foots.itarator();
			while(footit.hasNext()){
				var foot = footit.next();
				$(".foot-cnt")[0].insert(createFoot(foot.get("id"), foot.get("img"), foot.get("name")));
			}
		}else{
			//空容器
			$(".foot-bt-li")[0].insert(createFoot_null());
		}
	}
	//初始化右栏个人信息
	function initInfor(person){
		$(".my-infor-li")[0].insert(createInfor_login("" + person.get("name"), person.get("integral")));
	}
	
	//点击顶部进行跳转
	function clickToOfOpen(url, type){
		ajax({
			type:"post",
			url:"member_test",
			date:{type:type,},
			success:function(msg){
				console.log(msg);
				if(msg == "true")
					link.open(url);
				else alert("--跳转失败");
			},
			error:function(msg){
				alert("跳转失败");
			}
		});
	}
	//点击顶部进行登录、注册
	function clickToOfLocal(url){
		link.local(url);
	}

	$(".goods-area-part2")[0].$("li")[0].onclick = function(){
		link.local('fonts/店铺页面.html');
	}
	</script>
 </body>
</html>